<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/register/register.css" />
    <link rel="stylesheet" href="../../plugins/layui.css">
    <title>高校二手书交易平台</title>
</head>
<body background="../../images/login.svg">
    <form class="layui-form" action="javascript:void(0);">
        <div class="layui-form-item">
            <img class="logo" src="../../images/logo.png" />
            <div class="title">平 台 注 册</div>
            <div class="desc">
                高校二手书交易平台-为全国高校学子服务
            </div>
        </div>
        <div class="layui-form-item">
            <input name="username" type="text" placeholder="账 户" hover class="layui-input"  />
        </div>
        <div class="layui-form-item">
            <input name="password" type="password" placeholder="密 码" hover class="layui-input"  />
        </div>
        <div class="layui-form-item">
            <input name="re_password" type="password" placeholder="确 认 密 码" hover class="layui-input"  />
        </div>
        <div class="layui-form-item">
            <input placeholder="验证码" name="captcha" hover class="code layui-input layui-input-inline"  />
            <input id="key" name="key"  style="display: none;width: 0;height: 0;" value="">
            <img src="" class="codeImage" id="captchaImage"/>
        </div>
        <div class="layui-form-item">
            <button class="pear-btn-success register" lay-submit lay-filter="register">
                立 即 注 册
            </button>
        </div>
        <div class="layui-form-item">
            <input type="checkbox" name="agree" title="同意注册协议" lay-skin="primary">
            <div class="had">已有账号？<a href="#" id="login">立即登录</a></div>      
        </div>
    </form>

    <script src="../../plugins/layui.js"></script>
    <script src="../../plugins/jquery-3.2.1.min.js"></script>
    <script src="../../plugins/jquery-3.2.1.js"></script>

    <script>
        var loginButton = document.getElementById("login");
        loginButton.onclick = function(){
        window.location.href = "/pages/login/login.html";
    }

    let rootPath="http://39.106.137.246:10088"
    layui.use(['form','jquery','layer'], function() {

        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;
        form.on('submit(register)', function(data){
        	$(".register").attr("disabled","disabled")
            let loader = layer.load();
            $(".register").html("<i class='layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-icon-loading' />");
            $.ajax({
                url:rootPath+'/user/register',
                data:data.field,
                type:"post",
                dataType:'json',
                success:function(result){
                    if(result.code==200){
                    	console.log("注册成功");
                        layer.msg(result.msg,{icon:1,time:1000},function(){
                            location.href = "/front/index.html";
                        })
                    }else{
                        layer.msg(result.msg,{icon:2,time:1000},function(){
                            getCode()
                        });
                        $(".register").removeAttr("disabled");
                    }
                    $(".register").html("注 册")
                    layer.close(loader);
                }
            });
            return false;
        });

        $("#captchaImage").click(function(){
            getCode()
        })
        setInterval(function(){
            getCode()
        },30000);

  

    })
    function getCode(){
        $.get(rootPath+'/captcha/captchaImage', function(result) {
        $("#captchaImage").attr('src', "data:image/gif;base64,"+result.data.codeUrl); // 显示验证码图片
        $('#key').val(result.data.uuid); // 保存验证码key
        console.log($('#key').val());
        // localStorage.setItem("uuid",result.data.uuid);
    });
}


window.onload=function(){
    getCode()
}

    </script>
    
</body>
</html>